<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>


<title>角色 - 管理平台</title>

<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jquery-ui/jquery-ui.css" />
<link rel="stylesheet" href="${contextPath}/static/ace/components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" />
<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jqgrid/ui.jqgrid.css" />
<link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet" />

<style type="text/css">
	.customBtn {
		line-height: 20px;
	    margin-bottom: 3px;
	}
	.btnLine {
		margin-left: 1px; 
		margin-top: 8px;
		margin-bottom: 2px;
	}
	
</style>

<div class="row">
	<div class="row btnLine" >
		<div class="button-len col-sm-12">
				<%--<shiro:hasPermission name="ROLE:ADD">--%>
					<button class="btn btn-white btn-sm btn-purple customBtn" id="addCargo">
						<i class="ace-icon fa fa-plus-circle purple"></i> 新增
					</button>
				<%--</shiro:hasPermission>--%>
	
				<%--<shiro:hasPermission name="ROLE:EDIT">--%>
					<button class="btn btn-white btn-info btn-sm customBtn" id="editShop">
						<i class="ace-icon fa fa-pencil blue"></i> 修改
					</button>
				<%--</shiro:hasPermission>--%>
				<%--<shiro:hasPermission name="ROLE:AUTHORIZATION">--%>
					<button class="btn btn-white btn-danger btn-sm customBtn" id="roleAuthorization">
						<i class="ace-icon fa fa-flag red"></i> 授权
					</button>
				<%--</shiro:hasPermission>--%>
			<input class="input-sm" type="text" id="userName" style="margin-left: 20px;"
					placeholder="角色名称">
			<%--<input class="input-sm" type="text" id="phone" style="margin-left: 5px;"
				   placeholder="手机号">--%>
		<%--	<select id="stateInput">
						<option value="-1">==审核状态==</option>
						<option value="3">待审核</option>
						<option value="1">通过</option>
						<option value="4">拒绝</option>
						<option value="0">无效</option>
					</select>--%>
				<button class="btn btn-sm btn-white btn-info search-len customBtn"
					onclick="searchShop()">
					<i class="ace-icon fa fa-search orange"></i>搜索
				</button>
			</div>
	</div>
	
	<div class="col-xs-12">

		<table id="grid-table"></table>

		<div id="grid-pager"></div>

	</div>
</div>

<div id="authorizationInfoContent" class="hide">
	<div class="content_wrap">
		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree"></ul>
		</div>

	</div>

	<div>
		<button id="roleAuthorizationBtn" class="btn btn-success btn-sm" style="left: 700px;top: 430px;position: fixed;">确认</button>
	</div>
</div>

<!-- page specific plugin scripts -->
<script type="text/javascript">
	var scripts = [null,"${contextPath}/static/ace/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js","${contextPath}/static/ace/components/jqGrid/js/jquery.jqGrid.js","${contextPath}/static/ace/components/jqGrid/js/i18n/grid.locale-cn.js","${contextPath}/static/layer/layer.js","${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js", "${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js", null]
	$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	
	jQuery(function($) {
		var grid_selector = "#grid-table";
		var pager_selector = "#grid-pager";
		
		
		var parent_column = $(grid_selector).closest('[class*="col-"]');
		//resize to fit page size
		$(window).on('resize.jqGrid', function () {
			$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
	    })
		
		//resize on sidebar collapse/expand
		$(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
			if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
				//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
				setTimeout(function() {
					$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
				}, 20);
			}
	    })
		
		jQuery(grid_selector).jqGrid({
			//direction: "rtl",
	
			//subgrid options
			subGrid : false,
			url: "${contextPath}/sys/role/getRoleInfo",
			//data: grid_data,
			datatype: "json",
			mtype : 'POST',
			height: 300,
			colNames:['ID','角色名称','ROLE_KEY', '状态','修改时间','创建时间','店铺权限'],
			colModel:[
				{name:'id',index:'id', width:60, editable: true},
				{name:'roleName',index:'roleName',width:90, editable:true, sortable:false},
				{name:'roleKey',index:'roleKey', width:70, editable: true,  sortable:false},
				{name:'state',index:'state', width:90, editable: true, sortable:false,edittype:'select',editoptions: {value: "0:有效;1:无效"}},
				{name:'gmtModifiedStr',index:'gmtModifiedStr', width:150, editable: false},
				{name:'gmtCreateStr',index:'gmtCreateStr', width:150, editable: false},
                {name:'roleNo',index:'roleNo', width:150, editable: true, sortable:false,edittype:'select',editoptions: {value: ":无;29:所有店铺;27:区域店铺;26:店长;4:店员"},
                    formatter:function(cellvalue, options, rowObject) {
                        var roleNo = '-'
                    	if(cellvalue == '29'){
                    	    roleNo = '所有'
						}
						if(cellvalue == '27'){
                            roleNo = '区域'
                        }
                        if(cellvalue == '26'){
                            roleNo = '店长'
                        }
                        if(cellvalue == '4'){
                            roleNo = '店员'
                        }
                        return roleNo;
					}
				}

			], 
			sortname : "gmtModifiedStr",
			sortorder : "desc",
			viewrecords : true,
			rowNum:10,
			rowList:[10,20,30],
			pager : pager_selector,
			altRows: true,
			//toppager: true,
			
			multiselect: false,
			//multikey: "ctrlKey",
	        multiboxonly: true,
	
			loadComplete : function() {
				var table = this;
				setTimeout(function(){
					styleCheckbox(table);
					
					updateActionIcons(table);
					updatePagerIcons(table);
					enableTooltips(table);
				}, 0);
			},
	
			editurl: "${contextPath}/sys/role/editRoleInfo",//nothing is saved
			caption: "角色信息",
			jsonReader : {  
				root:"recordList",  
				page: "currentPage",  
				total: "pageCount",  
				records: "recordCount"
			}
	
			//,autowidth: true,
	
	
			/**
			,
			grouping:true, 
			groupingView : { 
				 groupField : ['name'],
				 groupDataSorted : true,
				 plusicon : 'fa fa-chevron-down bigger-110',
				 minusicon : 'fa fa-chevron-up bigger-110'
			},
			caption: "Grouping"
			*/
	
		});
		$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
		
		$("#editShop").click(function() {
			var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
			if (!id) {
				$.jgrid.info_dialog( "提示：", "请选择一条角色信息");
				return;
			}
			$(grid_selector).jqGrid("editGridRow",id,{
										// edit record form
										width : 500,
										closeAfterEdit : true,
										//editData : 
										recreateForm : true,
										viewPagerButtons : false,
										beforeShowForm : function(e) {
											var form = $(e[0]);
											form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
													.wrapInner('<div class="widget-header" />');
											style_edit_form(form);
										},
										afterSubmit : function(response, postdata) {
											var result = eval('('+ response.responseText + ')');
											//console.log(result);
											return [result.success,result.message,0] ;
											},
										errorTextFormat : function(response) {
											//console.log("错误"+response.responseText);
											//var result = response.responseText;
											return "服务器异常，稍后再试";
										}
									});
				});

		var modalIndex = null;

		$("#roleAuthorization").click(function(){
            var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
            if (!id) {
                $.jgrid.info_dialog( "提示：", "请选择一条角色信息");
                return;
            }
            layer.load(1);
            var setting = {
                check: {
                    enable: true,
                    chkStyle: "checkbox",
                    //chkboxType: { "Y" : "p", "N" : "ps" }
                },
                data: {
                    simpleData: {
                        enable: true ,
                        idKey: "id",
                        pIdKey: "pId",
                        rootPId: null,
                    }
                },
                /*callback: {
                    onCheck: zTreeOnCheck
                },*/
				/* 	async: {
				 enable: true,
				 dataType: "json",
				 type: "post",
				 contentType: "application/x-www-form-urlencoded",
				 url: "{ctx}/api/cloudling/findChlChannel",
				 autoParam: ["id", "pId" ,"cck"]
				 } */
            };

            var zNodes =[];

            $.ajax({
                url : "${contextPath}/sys/role/getPrivilegesByRoleId?roleId="+id,
                type : "get",
                dataType : "json",
                async : false,
                success : function(data) {
                    layer.closeAll('loading');
                    if (data.success) {
                        zNodes = data.data;
						console.log(zNodes)
                        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                        $("#authorizationInfoContent").removeClass("hide")
                        modalIndex = layer.open({
                            type: 1,
                            title: '修改角色权限',
                            closeBtn: 1,
                            shadeClose: true,
                            maxmin: true,
                            area: ['800px', '500px'],
                            skin: 'yourclass',
                            content: $("#authorizationInfoContent"),
                            end: function () {
                                $("#authorizationInfoContent").addClass("hide")
                            }
                        });
                    }else {
                        layer.msg(data.message)
                    }
                },
				error : function () {
                    layer.closeAll('loading');
					layer.msg("网络异常")
                }


            });


		})
		
		$("#roleAuthorizationBtn").click(function () {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getChangeCheckedNodes();
            if (nodes.length == 0) {
                layer.msg("权限没有被修改")
				return
			}
            layer.load(1);
            var checkedNode = [];//用来存储被选择的节点
            var cancelCheckedNode = []; //用来存储被取消选择的节点
            for (var i=0, l=nodes.length; i<l; i++) {
                 if(nodes[i].checked) {
                     checkedNode = checkedNode.concat(nodes[i].id);
				 }else {
                     cancelCheckedNode = cancelCheckedNode.concat(nodes[i].id);
				 }
            }
            //console.log(checkedNode)
            //console.log(cancelCheckedNode)
            var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
            $.ajax({
                url : "${contextPath}/sys/role/roleAuthorization",
                type : "post",
                dataType : "json",
                async : false,
				data : {
                    roleId : id,
                    checkedNode : checkedNode.join(","),
                    cancelCheckedNode : cancelCheckedNode.join(",")
				},
                success : function(data) {
                    layer.closeAll('loading');
                    if (data.success) {
						layer.close(modalIndex)
                    }
                    layer.msg(data.message)
                },
                error : function () {
                    layer.closeAll('loading');
                    layer.msg("网络异常")
                }


            })

        })

				$("#addCargo").click(function () {
                    $(grid_selector).jqGrid("editGridRow",'new',{
                        //new record form
                        //width: 700,
                        closeAfterAdd: true,
                        recreateForm: true,
                        viewPagerButtons: false,
                        beforeShowForm : function(e) {
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                                .wrapInner('<div class="widget-header" />')
                            style_edit_form(form);
                        },
                        afterSubmit : function(response, postdata) {
                            var result = eval('('+ response.responseText + ')');
                            ////console.log(result);
                            return [result.success,result.message,0] ;
                        },
                        errorTextFormat : function(response) {
                            //console.log("错误"+response.responseText);
                            //var result = response.responseText;
                            return "服务器异常，稍后再试";
                        }
                    });

                })


		//enable search/filter toolbar
		//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
		//jQuery(grid_selector).filterToolbar({});
	
	
		//switch element when editing inline
		function aceSwitch( cellvalue, options, cell ) {
			setTimeout(function(){
				$(cell) .find('input[type=checkbox]')
					.addClass('ace ace-switch ace-switch-5')
					.after('<span class="lbl"></span>');
			}, 0);
		}
		//enable datepicker
		function pickDate( cellvalue, options, cell ) {
			setTimeout(function(){
				$(cell) .find('input[type=text]')
					.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
			}, 0);
		}
	
	
		//navButtons
		jQuery(grid_selector).jqGrid('navGrid',pager_selector,
			{ 	//navbar options
				edit: false,
				editicon : 'ace-icon fa fa-pencil blue',
				add: false,
				addicon : 'ace-icon fa fa-plus-circle purple',
				del: false,
				delicon : 'ace-icon fa fa-trash-o red',
				search: false,
				searchicon : 'ace-icon fa fa-search orange',
				refresh: true,
				refreshicon : 'ace-icon fa fa-refresh green',
				view: false,
				viewicon : 'ace-icon fa fa-search-plus grey',
			},
			{
				//edit record form
				//closeAfterEdit: true,
				//width: 700,
				recreateForm: true,
				beforeShowForm : function(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_edit_form(form);
				}
			},
			{
				//new record form
				//width: 700,
				closeAfterAdd: true,
				recreateForm: true,
				viewPagerButtons: false,
				beforeShowForm : function(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
					.wrapInner('<div class="widget-header" />')
					style_edit_form(form);
				}
			},
			{
				//delete record form
				recreateForm: true,
				beforeShowForm : function(e) {
					var form = $(e[0]);
					if(form.data('styled')) return false;
					
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_delete_form(form);
					
					form.data('styled', true);
				},
				onClick : function(e) {
					//alert(1);
				}
			},
			{
				//search form
				recreateForm: true,
				afterShowSearch: function(e){
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
					style_search_form(form);
				},
				afterRedraw: function(){
					style_search_filters($(this));
				}
				,
				multipleSearch: true,
				/**
				multipleGroup:true,
				showQuery: true
				*/
			},
			{
				//view record form
				recreateForm: true,
				beforeShowForm: function(e){
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
				}
			}
		)
	
	
		
		function style_edit_form(form) {
			//enable datepicker on "sdate" field and switches for "stock" field
			//form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
			
			//form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
					   //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
					  //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
	
					
			//update buttons classes
			var buttons = form.next().find('.EditButton .fm-button');
			buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
			buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
			buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')
			
			buttons = form.next().find('.navButton a');
			buttons.find('.ui-icon').hide();
			buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
			buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');		
		}
	
		function style_delete_form(form) {
			var buttons = form.next().find('.EditButton .fm-button');
			buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
			buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
			buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
		}
		
		function style_search_filters(form) {
			form.find('.delete-rule').val('X');
			form.find('.add-rule').addClass('btn btn-xs btn-primary');
			form.find('.add-group').addClass('btn btn-xs btn-success');
			form.find('.delete-group').addClass('btn btn-xs btn-danger');
		}
		function style_search_form(form) {
			var dialog = form.closest('.ui-jqdialog');
			var buttons = dialog.find('.EditTable')
			buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
			buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
			buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
		}
		
		function beforeDeleteCallback(e) {
			var form = $(e[0]);
			if(form.data('styled')) return false;
			
			form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
			style_delete_form(form);
			form.data('styled', true);
		}
		
		function beforeEditCallback(e) {
			var form = $(e[0]);
			form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
			style_edit_form(form);
		}
	
	
	
		//it causes some flicker when reloading or navigating grid
		//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
		//or go back to default browser checkbox styles for the grid
		function styleCheckbox(table) {
		/**
			$(table).find('input:checkbox').addClass('ace')
			.wrap('<label />')
			.after('<span class="lbl align-top" />')
	
	
			$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
			.find('input.cbox[type=checkbox]').addClass('ace')
			.wrap('<label />').after('<span class="lbl align-top" />');
		*/
		}
		
	
		//unlike navButtons icons, action icons in rows seem to be hard-coded
		//you can change them like this in here if you want
		function updateActionIcons(table) {
			/**
			var replacement = 
			{
				'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
				'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
				'ui-icon-disk' : 'ace-icon fa fa-check green',
				'ui-icon-cancel' : 'ace-icon fa fa-times red'
			};
			$(table).find('.ui-pg-div span.ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
			*/
		}
		
		//replace icons with FontAwesome icons like above
		function updatePagerIcons(table) {
			var replacement = 
			{
				'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
				'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
				'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
				'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
			};
			$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
		}
	
		function enableTooltips(table) {
			$('.navtable .ui-pg-button').tooltip({container:'body'});
			$(table).find('.ui-pg-div').tooltip({container:'body'});
		}
	
		//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
	
		$(document).one('ajaxloadstart.page', function(e) {
			$.jgrid.gridDestroy(grid_selector);
			$('.ui-jqdialog').remove();
		});












	});
	});
</script>
<script type="text/javascript">
/**
		 * 搜索店铺 
		 */
		function searchShop() {
			var userName = $("#userName").val();
			var phone = $("#phone").val();
			//var parentDepartmentkey = $("#id_parentDepartmentkey_name").val();

			var filters = {
				"rules" : [ {
					"field" : "username",
					"data" : userName
				}, {
					"field" : "phone",
					"data" : phone
				}]
			};
			jQuery("#grid-table").jqGrid('setGridParam', {
				postData : {
					"filters" : JSON.stringify(filters) //"{'rules' : [{'field' : 'shopName','data' : "+shopName+"},{'field' : 'state','data' : "+state+"}]}"  
				}
			}).trigger("reloadGrid");
		}



</script>




